<template>
	<!-- 导航栏 -->
	<view>
		<view :class="getClass">
			<!-- 状态拦 -->
			<view :style="'height:'+statusBarHeight+'px'"></view>
			<!-- 导航栏 -->
			<view class="w-100 flex align-center justify-between" style="height: 90rpx;">
				<!-- 左边 -->
				<view class="flex align-center">
					<!-- 返回按钮 -->
					<!-- #ifndef MP -->
					<free-icon-button @click="back" :icon="'\ue60d'" v-if="showBack"></free-icon-button>
					<!-- #endif -->
					
					<!-- 标题 -->
					<slot>
						<text v-if="title" class="font-md ml-3">{{getTitle}}</text>
					</slot>
				</view>
				<!-- 右边 -->
				<view class="flex align-center" v-if="showRight">
					<slot name="right">
						<free-icon-button @click="search" 
						:icon="'\ue6e3'"></free-icon-button>
						<free-icon-button @click="openExtend" 
						:icon="'\ue682'"></free-icon-button>
					</slot>
				</view>
			</view>
		</view>
		<!-- 占位 -->
		<view v-if="fixed" :style="fixedStyle"></view>
		
		<!-- 扩展菜单 -->
		<free-popup ref="extend" :bodyW="320" :bodyH="525" v-if="showRight"
		bodyBgColor="bg-dark" transformOrigin="right top">
			<view class="flex flex-column" style="width: 320rpx; height: 525rpx;">
				<view class="flex-1 flex align-center" 
				hover-class="bg-hover-dark"
				v-for="(item,index) in menus" :key="index"
				@click="clickEvent(item)">
					<text class="iconfont font-md pl-3 pr-2 text-white">{{item.icon}}</text>
					<text class="font-md text-white">{{item.name}}</text>
				</view>
			</view>
		</free-popup>
	</view>
</template>

<script>
	import freeIconButton from "@/components/free-ui/free-icon-button.vue";
	import freePopup from "@/components/free-ui/free-popup.vue"
	export default {
		props:{
			// 是否显示返回按钮
			showBack:{
				type: Boolean,
				defalt: false
			},
			backEvent:{
				type: Boolean,
				default: true
			},
			title: {
				type: [Boolean,String],
				default: ''
			},
			fixed:{
				type: Boolean,
				default: true
			},
			noreadnum:{  //未读数
				type: [Number,String],
				default: 0
			},
			// 背景颜色
			bgColor:{
				type: String,
				default: "bg-light"
			},
			// 右边图标
			showRight:{
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				// 动态来获取状态栏的高度
				statusBarHeight:0,
				// 导航栏高度
				navBarHeight:0,
				menus:[
					{
						name: "发起群聊",
						event: "navigateTo",
						path: "/pages/mail/mail/mail?type=createGroup",
						icon: "\ue633"
					},
					{
						name: "添加好友",
						event: "navigateTo",
						path: "/pages/common/search/search",
						icon: "\ue65d"
					},
					// #ifndef H5
					{
						name: "扫一扫",
						event: "scan",
						icon: "\ue614"
					},
					// #endif
					{
						name: "收付款",
						event: "",
						icon: "\ue667"
					},
					{
						name: "帮助与反馈",
						event: "",
						icon: "\ue66c"
					}
				],
			}
		},
		mounted() {
			// 动态来获取状态栏的高度
			// #ifdef APP-PLUS-NVUE
			this.statusBarHeight = plus.navigator.getStatusbarHeight()
			// #endif
			this.navBarHeight = this.statusBarHeight + uni.upx2px(90)  // rpx转px
		},
		computed:{
			fixedStyle(){
				return 	`height:${this.navBarHeight}px`
			},
			getTitle(){
				let noreadnum = this.noreadnum > 0 ? `(${this.noreadnum})` : ''
				return this.title + noreadnum
			},
			getClass(){
				let fiexd = this.fixed?'fixed-top':''
				return `${fiexd} ${this.bgColor}`
			}
		},
		methods: {
			openExtend(){
				this.$refs.extend.show(uni.upx2px(415),uni.upx2px(150))
			},
			// 返回
			back(){
				if(this.backEvent){
					return uni.navigateBack({
						delta: 1
					});
				}
				this.$emit('back')
			},
			// 
			search(){
				uni.navigateTo({
					url: '/pages/common/search/search'
				});
			},
			// 弹窗扩展菜单
			clickEvent(item){
				this.$refs.extend.hide()
				switch (item.event){
					case 'navigateTo':
						uni.navigateTo({
							url: item.path
						})
						break;
					case 'scan':
						uni.scanCode({
							success:(res) => {
								if(res.scanType === 'QR_CODE'){
									let result = JSON.parse(res.result)
									switch (result.type){
										case 'group':
											console.log('group')
											// 判断用户是否在群聊，在群聊就直接跳转带群聊，不在就跳转到添加群聊页面
											$H.post('/group/checkrelation',{
												id: parseInt(result.id)
											}).then(res2=>{
												if(res2.status){
													// 已经在群内
													uni.navigateTo({
														url: '/pages/chat/chat?params='+encodeURIComponent(JSON.stringify({
															id: res2.group.id,
															name: res2.group.name,
															avatar: res2.group.avatar,
															chat_type: 'group'
														}))
													})
													this.chat.readChatItem(res2.group.id, 'group')
												} else{
													// 加入群聊
													uni.navigateTo({
														url: '/pages/chat/scan-add/scan-add?params=' + encodeURIComponent(JSON.stringify(res2.group))
													});
												}
												console.log(res2);
											})
											break;
										case 'user':
											uni.navigateTo({
												url: '/pages/mail/user-base/user-base?user_id='+result.id
											})
											break;
										default:
											break;
									}
								}
								console.log('条码类型：' + res.scanType);
								console.log('条码内容：' + res.result);
							}
						});
						break;
					default:
						break;
				}
			}
		},
		components:{
			freeIconButton,
			freePopup
		}
	}
</script>

<style>
</style>